<template>
  <div style="background: #202B61;width: 100%;height: 100%;">
    <!-- 楼宇场景设置 -->
    <div style="top: 1%; width: 100%;height: 80vh;float: left;position: absolute;">


      <div class="box1">
        <div class = "title">
          <div style="position: relative;left: 0%;line-height: 5vh;"><span style="margin-left: 1vh;">建筑基本信息</span></div>
        </div>

        <el-form ref="form" label-width="110px" label-suffix	=":" align="left"  style="margin-top: 1.5vh;color: #FFFFFF;"  :inline="true" :model="form" >

            <el-form-item  label-width="150px"  label="地理位置（经度）">
              <el-input  style="width: 200px;" v-model="form.longitude"></el-input>
            </el-form-item>

            <el-form-item  label-width="150px"  label="地理位置（纬度）">
              <el-input  style="width: 200px;"  v-model="form.latitude"></el-input>
            </el-form-item>

            <el-form-item  label="建筑层数">
              <el-input  style="width: 120px;"  v-model="form.floor_number"></el-input>
            </el-form-item>
            <el-form-item  label="楼顶倾斜度">
              <el-input  style="width: 120px;"  v-model="form.roof_angle">
                <i slot="suffix" style="font-style:normal;margin-right: 10px;">度</i>
              </el-input>
            </el-form-item>
            <el-form-item label="建筑面积">
              <el-input  style="width: 120px;"  v-model="form.build_area">
                <i slot="suffix" style="font-style:normal;margin-right: 10px;">㎡</i>
              </el-input>
            </el-form-item>

             <el-form-item style="float: right;right: 20px;" >
               <el-button type="primary" size="small" icon="el-icon-circle-plus-outline"  @click="dialogFormVisible = true">新建楼层</el-button>
             </el-form-item>

         </el-form>

        <!-- 楼层信息div -->
        <div id="floorFatherDiv" style="width: 99%;margin: 0 auto;">
          <floorTemplate v-for='(floorData,index) in floorDataArrs' v-bind:key="index"  :floorData="floorData" :index="index" @removeFloor="removeFloor" @cloneFloor="cloneFloor" @updateFloor="updateFloor" @removeRoom="removeRoom" @cloneRoom="cloneRoom" ></floorTemplate>
          <div style="width: 100%;height: 1vh;"></div>
        </div>


        <!-- 新建楼层信息 -->
         <el-dialog title="楼层信息"  :visible.sync="dialogFormVisible" align="left">

           <el-form ref="floorForm"  :rules="floorRules"  label-width="80px" label-suffix	=":" align="left"  style="margin-top: 1.5vh;color: #FFFFFF;"  :inline="true" :model="floorForm" >

             <el-form-item  label="楼层" prop="floorName">
               <el-input v-model="floorForm.floorName"></el-input>
             </el-form-item>

             <el-form-item  label="面积" prop="floorArea">
               <el-input v-model="floorForm.floorArea">
                 <i slot="suffix" style="font-style:normal;margin-right: 10px;">㎡</i>
               </el-input>
             </el-form-item>

             <el-form-item  label="高度" prop="floorHeight">
               <el-input v-model="floorForm.floorHeight">
                 <i slot="suffix" style="font-style:normal;margin-right: 10px;">m</i>
               </el-input>
             </el-form-item>

           </el-form>

          <div slot="footer" class="dialog-footer">
            <el-button  size="small"  type="primary" @click="saveFloor" >保存</el-button>
            <el-button  size="small" type="primary"  @click="dialogFormVisible = false;">取 消</el-button>
          </div>
        </el-dialog>
        <!-- 新建楼层信息 -->



      </div>




      <div class="box2">
        <div class = "title">
          <div style="position: relative;left: 0%;line-height: 5vh;"><span style="margin-left: 1vh;">空调设备信息                                                                                                                                                                                                                                                                                                                                                                                                                     </span></div>
        </div>

        <div style="width: 97%;margin: 0 auto;">
          <airConditioningEquipmentTemplate v-for='(airConditioningEquipmentData,index) in airConditioningEquipmentDataArrs' v-bind:key="index" :airConditioningEquipmentData="airConditioningEquipmentData" :index="index" @removeAirConditioningEquipment="removeAirConditioningEquipment" @cloneAirConditioningEquipment="cloneAirConditioningEquipment" ></airConditioningEquipmentTemplate>
          <div style="width: 100%;height: 1vh;"></div>
          <div slot="footer" style="margin-top: 3vh;" align="center"  class="dialog-footer">
            <el-button  size="small"  type="primary" icon="el-icon-circle-plus-outline" @click="createAirConditioningEquipment" >新增空调设备信息</el-button>
          </div>
          <div style="width: 100%;height: 1vh;"></div>
        </div>


      </div>



    </div>


  </div>
</template>

<script type="text/ecmascript-6">

  import floorTemplate from '../loadSimulation/floorTemplate'
  import airConditioningEquipmentTemplate from '../loadSimulation/airConditioningEquipmentTemplate'

  export default {
    name: 'buildingSettings',
    components: {
      floorTemplate,
      airConditioningEquipmentTemplate
    },
    data () {
      return {
        dialogFormVisible : false,
        floorDataArrs:[

        ],
        airConditioningEquipmentDataArrs:[
          {
            set_id : '',
            begin_time :'',
            end_time :'',
            max_temperature :'',
            min_temperature :'',
            mode :'制冷',
            date :'工作日'
          },
          {
            set_id : '',
            begin_time :'',
            end_time :'',
            max_temperature :'',
            min_temperature :'',
            mode :'制冷',
            date :'工作日'
          }
        ],
        floorForm : {
          layer_id : '',//楼层id
          floorName : '',
          floorArea : '',
          floorHeight : '',
          index : ''
        },
        form: {
          build_id:'',//建筑楼宇id
          latitude: '', //建筑位置（纬度）
          longitude: '', //建筑位置（经度）
          floor_number: '', //建筑层数
          roof_angle: '', //楼顶倾斜度
          build_area: '' //建筑面积

        },

        floorRules: {
          floorName: [
            { required: true, message: '请输入楼层名称', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
          floorArea: [
            { required: true, message: '请输入楼层面积', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
          floorHeight: [
            { required: true, message: '请输入楼层高度', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ]
        }

      }
    },
    mounted(){

      //项目id
      var projectId = this.$route.query.projectId;

      //初始化页面参数
      this.$http.post("/iepsapi/fhfz/sceneSettings/initPageParam?projectId="+projectId+"&scene=2", {}).then((res) => {

        var pageParam = res.data;

        if(pageParam!=null&&pageParam!=""){
          //循环遍历赋值
          for(var item in pageParam){
            var value = pageParam[item];
            this.form[item] = value;
          }
          this.floorDataArrs = pageParam.floorDataArrs;
          this.airConditioningEquipmentDataArrs = pageParam.airConditioningEquipmentDataArrs;

          var buildingSettingsParams = this.form;
          buildingSettingsParams.airConditioningEquipmentDataArrs = pageParam.airConditioningEquipmentDataArrs;
          buildingSettingsParams.floorDataArrs = pageParam.floorDataArrs;
          this.$emit('getSettingsParams',buildingSettingsParams);
          this.$forceUpdate();
        }else{
          var buildingSettingsParams = this.form;
          buildingSettingsParams.airConditioningEquipmentDataArrs = this.airConditioningEquipmentDataArrs;
          buildingSettingsParams.floorDataArrs = this.floorDataArrs;
          this.$emit('getSettingsParams',buildingSettingsParams);
          this.$forceUpdate();
        }


      })


    },
    methods: {

      cloneObjContainId:function(obj){

        var newObj = {};
        if (obj instanceof Array) {
          newObj = [];
        }
        for (var key in obj) {

          var val = obj[key];

          //newObj[key] = typeof val === 'object' ? arguments.callee(val) : val; //arguments.callee 在哪一个函数中运行，它就代表哪个函数, 一般用在匿名函数中。
          newObj[key] = typeof val === 'object' ? this.cloneObj(val): val;
        }
        return newObj;
      },

      cloneObj:function (obj) {

        var newObj = {};
        if (obj instanceof Array) {
          newObj = [];
        }
        for (var key in obj) {

          var isId = key.substring(key.length-"_id".length)=="_id";

          var val = obj[key];

          if(isId){
            val = '';
          }

          //newObj[key] = typeof val === 'object' ? arguments.callee(val) : val; //arguments.callee 在哪一个函数中运行，它就代表哪个函数, 一般用在匿名函数中。
          newObj[key] = typeof val === 'object' ? this.cloneObj(val): val;
        }
        return newObj;
      },
      saveFloor : function () {

        this.$refs['floorForm'].validate((valid) => {

          if (valid) {

            var index = this.floorForm.index;


            var index = parseInt(index);

            if(index>=0){
              //替换
              var floorData = this.cloneObjContainId(this.floorForm)
              floorData.roomDataArrs = this.floorDataArrs[index] .roomDataArrs;
              this.floorDataArrs[index] = floorData;
            }else{
              //新增
              var floorData = this.cloneObj(this.floorForm)
              this.floorDataArrs.push(floorData);
            }

            //清空已经填入的form信息
            this.floorForm.floorArea = "";
            this.floorForm.floorName = "";
            this.floorForm.floorHeight = "";
            this.floorForm.index = "";
            this.floorForm.layer_id = "";

            this.dialogFormVisible = false;

          } else {
            return false;
          }
        });

      },
      /* 删除楼层 */
      removeFloor : function (index) {

        this.$confirm('是否确认删除该楼层信息，删除时将同步删除楼层下级关联节点！', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',

          type: 'warning'
        }).then(() => {

          //根据子组件传递的index删除父组件当中的楼层数组当中的楼层数据
          var removeObj =  this.floorDataArrs.splice(index,1);

          if(removeObj!=null&&removeObj!=""){
            this.$http.post("/iepsapi/fhfz/sceneSettings/deleteFloor?", {removeObj}).then((res) => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            })
          }else{
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });



      },
      /* 复制楼层 */
      cloneFloor : function (index) {
        //根据子组件传递的index，在index后的位置，复制一个相同的楼层节点
        var floorData = this.floorDataArrs[index];
        var copyObj = this.cloneObj(floorData);
        this.floorDataArrs.splice(index+1,0,copyObj);
      },
      /* 修改楼层 */
      updateFloor : function (index) {

        //根据子组件传递的index，找到对应的楼层信息，通过弹窗进行修改。
        var floorData = this.floorDataArrs[index];
        this.floorForm.floorArea = floorData.floorArea;
        this.floorForm.floorName = floorData.floorName;
        this.floorForm.floorHeight = floorData.floorHeight;
        this.floorForm.layer_id = floorData.layer_id;
        this.floorForm.index = index;

        this.dialogFormVisible = true;

      },

      /* 克隆房间 */
      cloneRoom : function(index,roomIndex){
        //根据子组件传递的index，在index后的位置，复制一个相同的房间节点
        var roomData = this.floorDataArrs[index].roomDataArrs[roomIndex];
        var newRoomData = this.cloneObj(roomData);
        this.floorDataArrs[index].roomDataArrs.push(newRoomData);
      },
      /* 删除房间 */
      removeRoom : function(index,roomIndex){



        this.$confirm('是否确认删除该房间信息，删除时将同步删除房间下级关联节点！', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',

          type: 'warning'
        }).then(() => {

          //根据子组件传递的index删除父组件当中的楼层数组当中的楼层数据
          var removeObj =  this.floorDataArrs[index].roomDataArrs.splice(roomIndex,1);

          if(removeObj!=null&&removeObj!=""){
            this.$http.post("/iepsapi/fhfz/sceneSettings/deleteRoom?", {removeObj}).then((res) => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            })
          }else{
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });




      },

      /* 新建空调设备信息节点 */
      createAirConditioningEquipment : function(){
        var airConditioningEquipmentData = {
          set_id :'',//空调设备id
          begin_time :'',
          end_time :'',
          max_temperature :'',
          min_temperature :'',
          mode :'制冷',
          date :'工作日'
        };
        this.airConditioningEquipmentDataArrs.push(airConditioningEquipmentData);
      },
      /* 删除空调设备信息 */
      removeAirConditioningEquipment : function (index) {

        this.$confirm('是否确认删除该空调设备信息！', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',

          type: 'warning'
        }).then(() => {

          //根据子组件传递的index删除父组件当中的空调设备信息当中的空调设备信息数据
          var removeObj = this.airConditioningEquipmentDataArrs.splice(index,1);

          var set_id = removeObj[0].set_id;

          if(set_id!=null&&set_id!=""){
            this.$http.post("/iepsapi/fhfz/sceneSettings/deleteAirConditioningEquipment?set_id="+set_id, {}).then((res) => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            })
          }else{
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });



      },
      /* 复制空调设备信息 */
      cloneAirConditioningEquipment : function (index) {
        //根据子组件传递的index，在index后的位置，复制一个相同的空调设备信息节点
        var airConditioningEquipmentData = this.airConditioningEquipmentDataArrs[index];
        var newAirConditioningEquipmentData = this.cloneObj(airConditioningEquipmentData);
        newAirConditioningEquipmentData.set_id = '';
        this.airConditioningEquipmentDataArrs.splice(index+1,0,newAirConditioningEquipmentData);
      },

    }
  }


</script>

<style scoped >

  .floorBox{
    width: 100%;
    background: inherit;
    color: white;
    min-height: 20vh;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(81,101,205, 1);
    border-radius: 5px;
    -webkit-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    font-size: 2vh;
    text-align: right;
  }

  .floorInfo{
    padding-top: 0.5vh;
    width: 99%;
    margin: 0 auto;
    height: 6vh;
    color: white;
    font-size: 1.8vh;
    text-align: left;
  }

  /deep/ .el-dialog, .el-pager li {
    background: #202B61;
    -webkit-box-sizing: border-box;
  }


  /deep/ .el-dialog__header {
    padding: 20px 20px 10px;
    color: #FFF;
    background: #374590;
  }

  /deep/ .el-dialog__title {
    line-height: 15px;
    font-size: 16px;
    color: #FFF;
  }

  /deep/ .el-input__inner {
    -webkit-appearance: none;
    background-color: #161E43;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #161E43;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #4891EE;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;
  }


  /deep/ .el-input__inner {
    -webkit-appearance: none;
    background-color: #161E43;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #161E43;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #FFFFFF;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;
  }

  /deep/ .el-form-item__label {
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 14px;
    color: #FFF !important;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }


  .box1{
    position: relative;
    width: 100%;
    background: inherit;
    background-color: rgba(45, 61, 136, 0.6);
    color: white;
    min-height: 50vh;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(226, 239, 249, 1);
    border : none;
    border-radius: 5px;
    -webkit-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    font-size: 2vh;
    text-align: right;
  }

  .box2{
    position: relative;
    width: 100%;
    min-height: 29vh;
    margin-top:0.5%;
    background: inherit;
    background-color: rgba(45, 61, 136, 0.6);
    color: white;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(226, 239, 249, 1);
    border : none;
    border-radius: 5px;
    -webkit-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    font-size: 2vh;
    text-align: right;
  }




  .title{
    width:100%;
    height:5vh;
    line-height: 5vh;
    background:rgba(55, 69, 144, 1);

    font-weight:bold;
    background: inherit;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
    font-weight: 700;
    font-style: normal;
    font-size: 1.5vh;
    color: #FFFFFF;
    text-align: left;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(55, 69, 144, 1);
    border-radius: 1px;
    -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.345098039215686);
    -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.345098039215686);
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.345098039215686);
  }


</style>
